<%@ page session="false" language="java" contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include.inc.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>运行养护</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="${contextPath}/resources/assets/css/bootstrap.css" />
<link rel="stylesheet" href="${contextPath}/resources/assets/css/font-awesome.css" />

    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="${contextPath}/resources/assets/css/ace-fonts.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="${contextPath}/resources/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
    

    <!--[if lte IE 9]>
			<link rel="stylesheet" href="${contextPath}/resources/assets/css/ace-part2.css" class="ace-main-stylesheet" />
		<![endif]-->

    <!--[if lte IE 9]>
		  <link rel="stylesheet" href="${contextPath}/resources/assets/css/ace-ie.css" />
		<![endif]-->

    <!-- inline styles related to this page -->
<script src="${contextPath}/resources/assets/js/ace-extra.js"></script>
<style>
        .seari_logo {
            padding-left: 10px;
            color: #ffffff;
            font-size: 20px;
            text-shadow: none;
            font-weight: 600;
            line-height: 80px;
            
        }
        
        .seari_logo:hover,
        .seari_logo:focus {
            color: #ffffff;
            text-decoration: none;
        }
        
       .navbar{
            min-height: 80px;
            background: url("${contextPath}/resources/img/navbar-bg.png") repeat-x;
        }
        
        .navbar .navbar-nav > li {
            border: 0px solid rgba(0, 0, 0, 0);
        }
        
        .navbar .navbar-nav > li > a {
            padding-top: 18px;
        }
        
        @media only screen and (max-width: 991px) {
            .navbar-nav {
                float: left;
                margin: 0;
            }
            .navbar-nav > li {
                float: left;
            }
            .navbar-menu-min .navbar-nav > li > a > .menu-title {
                /*display: none;*/
            }
        }
        
        .navbar-menu{
            padding-top: 20px;
        }
        .menu-title{
            font:16px/1.5 'Microsoft YaHei',SimSun;
        }
        .page-content{
           font:12px/20px "Microsoft YaHei";
        }
        .sidebar{
            font-family:  "Microsoft YaHei";
        }
        .breadcrumb{
            font-family:  "Microsoft YaHei";
        }
        
        /****box design style*****/
.box {
	float: left;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	display: block;
	background-color: #fff;
}
.london {border-top: 7px solid #19beb6;}
.paris { border-top: 7px solid #df9801; }
.box-icon {
	width: 100%;
	position: relative;
}

.info-nav-container {
	width: 32%;
    margin-right: 3%;
}

.float-container { overflow: auto; }

.info {
	width: 100%;
	padding: 15px 30px 20px;
    font-size: 16px;
}

.info-description-container {
	padding: 20px 30px;
	float: right;
	width: 65%;
}


.london-title {
	padding: 0 0 0 5px;
	border-left: 2px solid #19beb6;
	margin: 25px 0px;
}
.london-title h2 {
	color: #19beb6;
	font:24px/1.5 'Microsoft YaHei';
	margin: 5px;
}

        
.paris-title {	border-left: 2px solid #df9801; }
.paris-title h2 { color: #df9801;font:24px/1.5 'Microsoft YaHei'; }
        
        .banner-main-home {
	background-color: white;
	background: url("${contextPath}/resources/img/gcgk-3.jpg");
background-position: bottom;
	background-size: cover;
	border-top: 7px solid #10a5cd;
	min-height: 650px;	
	overflow-y: auto;
}
.banner-main-home {
	padding: 0px 0px 0px 50px;
}
.banner-main-home-bg {
	position: relative;
	float: right;
	width: 45%;
    height:650px;
    background-color: rgba(39,39,39,0.6);
    padding:180px 40px 0px 40px;
}        
.banner-main-home-text {
	color: #fff;
	text-align: left;
	right: 0;
	top: 0px; 
	left: 0;
	text-shadow: none;
    font:16px/1.5 'Microsoft YaHei';
}
        .heading{
            border-left: 4px solid #10a5cd;
        }
        
        .banner-main-home-text h2{
            margin: 5px;
            font:24px/1.5 'Microsoft YaHei';
        }
    </style>
</head>
<body class="no-skin">
	<!-- /section:basics/navbar.layout -->
    <div class="main-container" id="main-container">

        <!-- /section:左侧树菜单 basics/sidebar -->
        <div class="main-content">
            <!-- #section:面包屑导航路径 basics/content.breadcrumbs -->
		<div class="page-content">
		    <div id="wrapper">
            <div id="Y-description">
                
            </div>
            <div id="Y-videoID" class="floatleft">
                摄像机编号：054
            </div>
            <div id="Y-carID" class="floatright">
                移动小车编号：037
            </div>
            <div id="Y-video-content" class="floatleft">
                <div id="divPlugin" class="plugin" style="margin-left:10px"></div>
            </div>
            <div id="Y-car-direction-control" class="floatright">
                <div id="back" onclick="carback()"></div>
                <div id="stop" onclick="carstop()"></div>
                <div id="go" onclick="cargo()"></div>
            </div>
            <div id="Y-car-state-control" class="floatright">
                <div id="mod">模式切换</div><div id="icon1"></div><br>
                <div id="state">工作状态</div><div id="icon2"><input type="text" value="手动"></div><br>
                <div id="lacotion" class="floatleft">当前位置</div><div id="icon3"><input type="text" value="预设位"></div>
            </div>
            <div id="Y-car-location" class="floatright">
                
            </div>
            <div id="Y-video-direction-control" class="floatleft">   
                <div class="direction" onmousedown="mouseDownPTZControl(5);" onmouseup="mouseUpPTZControl();"></div>
                <div class="direction" onmousedown="mouseDownPTZControl(1);" onmouseup="mouseUpPTZControl();"></div>
                <div class="direction" onmousedown="mouseDownPTZControl(7);" onmouseup="mouseUpPTZControl();"></div>
                <div class="direction" onmousedown="mouseDownPTZControl(3);" onmouseup="mouseUpPTZControl();"></div>
                <div class="direction" onmousedown="mouseDownPTZControl(9);" onmouseup="mouseUpPTZControl();"></div>
                <div class="direction" onmousedown="mouseDownPTZControl(4);" onmouseup="mouseUpPTZControl();"></div>
                <div class="direction" onmousedown="mouseDownPTZControl(6);" onmouseup="mouseUpPTZControl();"></div>
                <div class="direction" onmousedown="mouseDownPTZControl(2);" onmouseup="mouseUpPTZControl();"></div>
                <div class="direction" onmousedown="mouseDownPTZControl(8);" onmouseup="mouseUpPTZControl();"></div>  
            </div>
            <div id="Y-video-Speed" class="floatleft">
                <div id="slider">
                    <input class="easyui-slider slider-inner" min="1" max="7" step="1" value="4" style="width:80%" data-options="
                            onChange: function(value){
                                      $('#speed').combobox('setValue', value);
                                      }">
                </div>
                <div id="slector">
                    <select id="speed" class="easyui-combobox" name="speed" style="width:50px;" data-options="editable:false,panelHeight:150">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
							<option value="4" selected>4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
				    </select>
                </div>
            </div>
            <div id="Y-video-vision-control" class="floatleft">
                <table id="videoControlButton">
                    <tr>
                        <td id="t11" onmousedown="PTZZoomIn();tablemousedown('t11','enlarge')" onmouseup="PTZZoomStop();tablemouseup('t11','enlarge')"></td>
                        <td id="t12"  onmousedown="PTZFocusIn();tablemousedown('t12','focus+')" onmouseup="PTZFoucusStop();tablemouseup('t12','focus+')"></td>
                        <td id="t13"></td>
                    </tr>
                    <tr>
                        <td id="t21" onmousedown="PTZZoomout();tablemousedown('t21','narrow')" onmouseup="PTZZoomStop();tablemouseup('t21','narrow')"></td>
                        <td id="t22" onmousedown="PTZFoucusOut();tablemousedown('t22','focus-')" onmouseup="PTZFoucusStop();tablemouseup('t22','focus-')"></td>
                        <td id="t23"></td>
                    </tr>
                </table>
            </div>
            <div id="Y-video-state-control" class="floatleft">
                <br>
                <div class="floatleft">动作选择</div><select style="width:100px;margin-left:10%;" onchange="actionSelect(this);"><option value="">请选择</option><option value="轨迹扫描">轨迹扫描</option></select><br><br>
                <div class="floatleft">工作状态</div><input style="width:100px;margin-left:10%;" type="text" value="停止">
                 
            </div>
        </div>
		</div>
		</div>
		</div>
		
		 <script type="text/javascript">
        window.jQuery || document.write("<script src='${contextPath}/resources/assets/js/jquery.js'>" + "<" + "/script>");
    </script>

<script type="text/javascript">
   var contextPath = '${contextPath}';
</script>
        <link rel="stylesheet" href="${contextPath}/resources/easyui/themes/default/easyui.css" type="text/css" />
        <link rel="stylesheet" href="${contextPath}/resources/css/common.css" type="text/css" />
        <link rel="stylesheet" href="${contextPath}/resources/easyui/themes/icon.css" type="text/css" />
        <link rel="stylesheet" href="${contextPath}/resources/easyui/themes/default/slider.css" type="text/css">
        <script type="text/javascript" src="${contextPath}/resources/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="${contextPath}/resources/My97DatePicker/WdatePicker.js"></script>
        <script type="text/javascript" src="${contextPath}/resources/js/webVideoCtrl.js"></script>
        <script type="text/javascript" src="${contextPath}/resources/js/config.js"></script>
        <script type="text/javascript" src="${contextPath}/resources/js/camindex.js"></script>
<script src="${contextPath}/resources/js/xcxk.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="${contextPath}/resources/css/xcxk.css"/>
  <script type="text/javascript">
        if ('ontouchstart' in document.documentElement) document.write("<script src='${contextPath}/resources/assets/js/jquery.mobile.custom.js'>" + "<" + "/script>");
    </script>
    <script src="${contextPath}/resources/assets/js/bootstrap.js"></script>
    <!-- ace scripts -->
    <script src="${contextPath}/resources/assets/js/ace/elements.scroller.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/elements.colorpicker.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/elements.fileinput.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/elements.typeahead.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/elements.wysiwyg.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/elements.spinner.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/elements.treeview.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/elements.wizard.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/elements.aside.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.ajax-content.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.touch-drag.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.sidebar.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.sidebar-scroll-1.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.submenu-hover.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.widget-box.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.settings.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.settings-rtl.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.settings-skin.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.widget-on-reload.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.searchbox-autocomplete.js"></script>
    <script src="${contextPath}/resources/assets/js/ace/ace.hover-dropdown.js"></script>
    
</body>
</html>
